<title>字体图标 7-stroke</title>

<link rel="stylesheet" href="/vendor/bootstrap-slider/bootstrap-slider.css">
<link rel="stylesheet" href="/fonts/7-stroke/7-stroke.css">
<link rel="stylesheet" href="/css/examples/components/basic/icon.css">

<div class="page animation-fade">
    <div class="page-header">
        <ol class="breadcrumb">
            <li>
                <a href="/examples/components/basic/icons.html" data-pjax>矢量图标</a>
            </li>
            <li class="active">7 - Stroke</li>
        </ol>
        <div class="page-header-actions">
            <a class="btn btn-default btn-outline btn-round" href="http://www.pixeden.com/icon-fonts/stroke-7-icon-font-set" target="_blank">
                <i class="icon wb-link" aria-hidden="true"></i> <span class="hidden-xs">官网</span></a>
        </div>
    </div>
    <div class="page-content container-fluid">
        <div class="row padding-vertical-30">
            <div class="col-sm-12 text-center">
                <h2>7 - Stroke 图标搜索</h2>
                <form role="search">
                    <div class="input-search">
                        <input type="text" class="form-control round" placeholder="搜索图标...">
                        <button type="submit" class="input-search-btn">
                            <i class="icon wb-search" aria-hidden="true"></i>
                        </button>
                    </div>
                </form>
                <div class="width-300 center-block margin-vertical-50">
                    <input id="iconChange" class="icon-slider" type="text" data-plugin="bootstrapSlider" data-slider-min="16" data-slider-max="64" data-slider-step="1" data-slider-value="24" data-slider-tooltip="always">
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="row">
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cloud-upload">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-cloud-upload" aria-hidden="true"></i>
                            <div class="icon-title">cloud-upload</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cash">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-cash" aria-hidden="true"></i>
                            <div class="icon-title">cash</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="close">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-close" aria-hidden="true"></i>
                            <div class="icon-title">close</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="bluetooth">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-bluetooth" aria-hidden="true"></i>
                            <div class="icon-title">bluetooth</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cloud-download">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-cloud-download" aria-hidden="true"></i>
                            <div class="icon-title">cloud-download</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="way">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-way" aria-hidden="true"></i>
                            <div class="icon-title">way</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="close-circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-close-circle" aria-hidden="true"></i>
                            <div class="icon-title">close-circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="id">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-id" aria-hidden="true"></i>
                            <div class="icon-title">id</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="angle-up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-angle-up" aria-hidden="true"></i>
                            <div class="icon-title">angle-up</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="wristwatch">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-wristwatch" aria-hidden="true"></i>
                            <div class="icon-title">wristwatch</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="angle-up-circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-angle-up-circle" aria-hidden="true"></i>
                            <div class="icon-title">angle-up-circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="world">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-world" aria-hidden="true"></i>
                            <div class="icon-title">world</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="angle-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-angle-right" aria-hidden="true"></i>
                            <div class="icon-title">angle-right</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="volume">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-volume" aria-hidden="true"></i>
                            <div class="icon-title">volume</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="angle-right-circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-angle-right-circle" aria-hidden="true"></i>
                            <div class="icon-title">angle-right-circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="users">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-users" aria-hidden="true"></i>
                            <div class="icon-title">users</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="angle-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-angle-left" aria-hidden="true"></i>
                            <div class="icon-title">angle-left</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="user-female">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-user-female" aria-hidden="true"></i>
                            <div class="icon-title">user-female</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="angle-left-circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-angle-left-circle" aria-hidden="true"></i>
                            <div class="icon-title">angle-left-circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="up-arrow">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-up-arrow" aria-hidden="true"></i>
                            <div class="icon-title">up-arrow</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="angle-down">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-angle-down" aria-hidden="true"></i>
                            <div class="icon-title">angle-down</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="switch">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-switch" aria-hidden="true"></i>
                            <div class="icon-title">switch</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="angle-down-circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-angle-down-circle" aria-hidden="true"></i>
                            <div class="icon-title">angle-down-circle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="scissors">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-scissors" aria-hidden="true"></i>
                            <div class="icon-title">scissors</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="wallet">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-wallet" aria-hidden="true"></i>
                            <div class="icon-title">wallet</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="safe">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-safe" aria-hidden="true"></i>
                            <div class="icon-title">safe</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="volume2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-volume2" aria-hidden="true"></i>
                            <div class="icon-title">volume2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="volume1">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-volume1" aria-hidden="true"></i>
                            <div class="icon-title">volume1</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="voicemail">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-voicemail" aria-hidden="true"></i>
                            <div class="icon-title">voicemail</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="video">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-video" aria-hidden="true"></i>
                            <div class="icon-title">video</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="user">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-user" aria-hidden="true"></i>
                            <div class="icon-title">user</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="upload">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-upload" aria-hidden="true"></i>
                            <div class="icon-title">upload</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="unlock">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-unlock" aria-hidden="true"></i>
                            <div class="icon-title">unlock</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="umbrella">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-umbrella" aria-hidden="true"></i>
                            <div class="icon-title">umbrella</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="trash">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-trash" aria-hidden="true"></i>
                            <div class="icon-title">trash</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="tools">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-tools" aria-hidden="true"></i>
                            <div class="icon-title">tools</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="target">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-target" aria-hidden="true"></i>
                            <div class="icon-title">target</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="sun">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-sun" aria-hidden="true"></i>
                            <div class="icon-title">sun</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="study">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-study" aria-hidden="true"></i>
                            <div class="icon-title">study</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="stopwatch">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-stopwatch" aria-hidden="true"></i>
                            <div class="icon-title">stopwatch</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="star">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-star" aria-hidden="true"></i>
                            <div class="icon-title">star</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="speaker">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-speaker" aria-hidden="true"></i>
                            <div class="icon-title">speaker</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="signal">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-signal" aria-hidden="true"></i>
                            <div class="icon-title">signal</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="shuffle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-shuffle" aria-hidden="true"></i>
                            <div class="icon-title">shuffle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="shopbag">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-shopbag" aria-hidden="true"></i>
                            <div class="icon-title">shopbag</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="share">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-share" aria-hidden="true"></i>
                            <div class="icon-title">share</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="server">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-server" aria-hidden="true"></i>
                            <div class="icon-title">server</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="search">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-search" aria-hidden="true"></i>
                            <div class="icon-title">search</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="film">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-film" aria-hidden="true"></i>
                            <div class="icon-title">film</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="science">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-science" aria-hidden="true"></i>
                            <div class="icon-title">science</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="disk">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-disk" aria-hidden="true"></i>
                            <div class="icon-title">disk</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="ribbon">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-ribbon" aria-hidden="true"></i>
                            <div class="icon-title">ribbon</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="repeat">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-repeat" aria-hidden="true"></i>
                            <div class="icon-title">repeat</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="refresh">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-refresh" aria-hidden="true"></i>
                            <div class="icon-title">refresh</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="add-user">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-add-user" aria-hidden="true"></i>
                            <div class="icon-title">add-user</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="refresh-cloud">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-refresh-cloud" aria-hidden="true"></i>
                            <div class="icon-title">refresh-cloud</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="paperclip">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-paperclip" aria-hidden="true"></i>
                            <div class="icon-title">paperclip</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="radio">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-radio" aria-hidden="true"></i>
                            <div class="icon-title">radio</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="note2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-note2" aria-hidden="true"></i>
                            <div class="icon-title">note2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="print">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-print" aria-hidden="true"></i>
                            <div class="icon-title">print</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="network">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-network" aria-hidden="true"></i>
                            <div class="icon-title">network</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="prev">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-prev" aria-hidden="true"></i>
                            <div class="icon-title">prev</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mute">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-mute" aria-hidden="true"></i>
                            <div class="icon-title">mute</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="power">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-power" aria-hidden="true"></i>
                            <div class="icon-title">power</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="medal">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-medal" aria-hidden="true"></i>
                            <div class="icon-title">medal</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="portfolio">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-portfolio" aria-hidden="true"></i>
                            <div class="icon-title">portfolio</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="like2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-like2" aria-hidden="true"></i>
                            <div class="icon-title">like2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="plus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-plus" aria-hidden="true"></i>
                            <div class="icon-title">plus</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="left-arrow">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-left-arrow" aria-hidden="true"></i>
                            <div class="icon-title">left-arrow</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="play">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-play" aria-hidden="true"></i>
                            <div class="icon-title">play</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="key">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-key" aria-hidden="true"></i>
                            <div class="icon-title">key</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="plane">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-plane" aria-hidden="true"></i>
                            <div class="icon-title">plane</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="joy">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-joy" aria-hidden="true"></i>
                            <div class="icon-title">joy</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="photo-gallery">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-photo-gallery" aria-hidden="true"></i>
                            <div class="icon-title">photo-gallery</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="pin">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-pin" aria-hidden="true"></i>
                            <div class="icon-title">pin</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="phone">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-phone" aria-hidden="true"></i>
                            <div class="icon-title">phone</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="plug">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-plug" aria-hidden="true"></i>
                            <div class="icon-title">plug</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="pen">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-pen" aria-hidden="true"></i>
                            <div class="icon-title">pen</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="right-arrow">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-right-arrow" aria-hidden="true"></i>
                            <div class="icon-title">right-arrow</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="paper-plane">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-paper-plane" aria-hidden="true"></i>
                            <div class="icon-title">paper-plane</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="delete-user">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-delete-user" aria-hidden="true"></i>
                            <div class="icon-title">delete-user</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="paint">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-paint" aria-hidden="true"></i>
                            <div class="icon-title">paint</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="bottom-arrow">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-bottom-arrow" aria-hidden="true"></i>
                            <div class="icon-title">bottom-arrow</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="notebook">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-notebook" aria-hidden="true"></i>
                            <div class="icon-title">notebook</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="note">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-note" aria-hidden="true"></i>
                            <div class="icon-title">note</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="next">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-next" aria-hidden="true"></i>
                            <div class="icon-title">next</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="news-paper">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-news-paper" aria-hidden="true"></i>
                            <div class="icon-title">news-paper</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="musiclist">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-musiclist" aria-hidden="true"></i>
                            <div class="icon-title">musiclist</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="music">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-music" aria-hidden="true"></i>
                            <div class="icon-title">music</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mouse">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-mouse" aria-hidden="true"></i>
                            <div class="icon-title">mouse</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="more">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-more" aria-hidden="true"></i>
                            <div class="icon-title">more</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="moon">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-moon" aria-hidden="true"></i>
                            <div class="icon-title">moon</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="monitor">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-monitor" aria-hidden="true"></i>
                            <div class="icon-title">monitor</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="micro">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-micro" aria-hidden="true"></i>
                            <div class="icon-title">micro</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="menu">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-menu" aria-hidden="true"></i>
                            <div class="icon-title">menu</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="map">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-map" aria-hidden="true"></i>
                            <div class="icon-title">map</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="map-marker">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-map-marker" aria-hidden="true"></i>
                            <div class="icon-title">map-marker</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mail">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-mail" aria-hidden="true"></i>
                            <div class="icon-title">mail</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mail-open">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-mail-open" aria-hidden="true"></i>
                            <div class="icon-title">mail-open</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="mail-open-file">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-mail-open-file" aria-hidden="true"></i>
                            <div class="icon-title">mail-open-file</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="magnet">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-magnet" aria-hidden="true"></i>
                            <div class="icon-title">magnet</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="loop">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-loop" aria-hidden="true"></i>
                            <div class="icon-title">loop</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="look">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-look" aria-hidden="true"></i>
                            <div class="icon-title">look</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="lock">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-lock" aria-hidden="true"></i>
                            <div class="icon-title">lock</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="lintern">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-lintern" aria-hidden="true"></i>
                            <div class="icon-title">lintern</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="link">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-link" aria-hidden="true"></i>
                            <div class="icon-title">link</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="like">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-like" aria-hidden="true"></i>
                            <div class="icon-title">like</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="light">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-light" aria-hidden="true"></i>
                            <div class="icon-title">light</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="less">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-less" aria-hidden="true"></i>
                            <div class="icon-title">less</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="keypad">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-keypad" aria-hidden="true"></i>
                            <div class="icon-title">keypad</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="junk">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-junk" aria-hidden="true"></i>
                            <div class="icon-title">junk</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="info">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-info" aria-hidden="true"></i>
                            <div class="icon-title">info</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="home">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-home" aria-hidden="true"></i>
                            <div class="icon-title">home</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="help2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-help2" aria-hidden="true"></i>
                            <div class="icon-title">help2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="help1">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-help1" aria-hidden="true"></i>
                            <div class="icon-title">help1</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="graph3">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-graph3" aria-hidden="true"></i>
                            <div class="icon-title">graph3</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="graph2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-graph2" aria-hidden="true"></i>
                            <div class="icon-title">graph2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="graph1">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-graph1" aria-hidden="true"></i>
                            <div class="icon-title">graph1</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="graph">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-graph" aria-hidden="true"></i>
                            <div class="icon-title">graph</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="global">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-global" aria-hidden="true"></i>
                            <div class="icon-title">global</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="gleam">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-gleam" aria-hidden="true"></i>
                            <div class="icon-title">gleam</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="glasses">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-glasses" aria-hidden="true"></i>
                            <div class="icon-title">glasses</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="gift">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-gift" aria-hidden="true"></i>
                            <div class="icon-title">gift</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="folder">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-folder" aria-hidden="true"></i>
                            <div class="icon-title">folder</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="flag">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-flag" aria-hidden="true"></i>
                            <div class="icon-title">flag</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="filter">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-filter" aria-hidden="true"></i>
                            <div class="icon-title">filter</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="file">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-file" aria-hidden="true"></i>
                            <div class="icon-title">file</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="expand1">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-expand1" aria-hidden="true"></i>
                            <div class="icon-title">expand1</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="exapnd2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-exapnd2" aria-hidden="true"></i>
                            <div class="icon-title">exapnd2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="edit">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-edit" aria-hidden="true"></i>
                            <div class="icon-title">edit</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="drop">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-drop" aria-hidden="true"></i>
                            <div class="icon-title">drop</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="drawer">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-drawer" aria-hidden="true"></i>
                            <div class="icon-title">drawer</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="download">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-download" aria-hidden="true"></i>
                            <div class="icon-title">download</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="display2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-display2" aria-hidden="true"></i>
                            <div class="icon-title">display2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="display1">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-display1" aria-hidden="true"></i>
                            <div class="icon-title">display1</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="diskette">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-diskette" aria-hidden="true"></i>
                            <div class="icon-title">diskette</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="date">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-date" aria-hidden="true"></i>
                            <div class="icon-title">date</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cup">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-cup" aria-hidden="true"></i>
                            <div class="icon-title">cup</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="culture">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-culture" aria-hidden="true"></i>
                            <div class="icon-title">culture</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="crop">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-crop" aria-hidden="true"></i>
                            <div class="icon-title">crop</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="credit">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-credit" aria-hidden="true"></i>
                            <div class="icon-title">credit</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="copy-file">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-copy-file" aria-hidden="true"></i>
                            <div class="icon-title">copy-file</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="config">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-config" aria-hidden="true"></i>
                            <div class="icon-title">config</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="compass">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-compass" aria-hidden="true"></i>
                            <div class="icon-title">compass</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="comment">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-comment" aria-hidden="true"></i>
                            <div class="icon-title">comment</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="coffee">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-coffee" aria-hidden="true"></i>
                            <div class="icon-title">coffee</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cloud">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-cloud" aria-hidden="true"></i>
                            <div class="icon-title">cloud</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="clock">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-clock" aria-hidden="true"></i>
                            <div class="icon-title">clock</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="check">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-check" aria-hidden="true"></i>
                            <div class="icon-title">check</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="chat">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-chat" aria-hidden="true"></i>
                            <div class="icon-title">chat</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="cart">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-cart" aria-hidden="true"></i>
                            <div class="icon-title">cart</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="camera">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-camera" aria-hidden="true"></i>
                            <div class="icon-title">camera</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="call">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-call" aria-hidden="true"></i>
                            <div class="icon-title">call</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="calculator">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-calculator" aria-hidden="true"></i>
                            <div class="icon-title">calculator</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="browser">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-browser" aria-hidden="true"></i>
                            <div class="icon-title">browser</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="box2">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-box2" aria-hidden="true"></i>
                            <div class="icon-title">box2</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="box1">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-box1" aria-hidden="true"></i>
                            <div class="icon-title">box1</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="bookmarks">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-bookmarks" aria-hidden="true"></i>
                            <div class="icon-title">bookmarks</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="bicycle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-bicycle" aria-hidden="true"></i>
                            <div class="icon-title">bicycle</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="bell">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-bell" aria-hidden="true"></i>
                            <div class="icon-title">bell</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="battery">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-battery" aria-hidden="true"></i>
                            <div class="icon-title">battery</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="ball">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-ball" aria-hidden="true"></i>
                            <div class="icon-title">ball</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="back">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-back" aria-hidden="true"></i>
                            <div class="icon-title">back</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="attenpeon">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-attenpeon" aria-hidden="true"></i>
                            <div class="icon-title">attenpeon</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="anchor">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-anchor" aria-hidden="true"></i>
                            <div class="icon-title">anchor</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="albums">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-albums" aria-hidden="true"></i>
                            <div class="icon-title">albums</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="alarm">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-alarm" aria-hidden="true"></i>
                            <div class="icon-title">alarm</div>
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 icondemo-wrap vertical-align" data-name="airplay">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon pe-airplay" aria-hidden="true"></i>
                            <div class="icon-title">airplay</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/vendor/bootstrap-slider/bootstrap-slider.min.js"></script>
<script src="/js/examples/components/basic/icon.js"></script>
